import React, { Component } from 'react'
import "../../asset/css/index.css"
import logo from '../../asset/image/logo.png'
import yh1 from "../../asset/image/yh.png"
import yh2 from "../../asset/image/yh2.png"
import seckilli from "../../asset/image/seckill.png"
import integral from "../../asset/image/integral.png"
import selfsupport from "../../asset/image/selfsupport.png"
import brand from "../../asset/image/brand.png"
import top from "../../asset/image/top.png"
import d11 from '../../asset/image/11.png'
import cg1 from '../../asset/image/cg1.png'
import cg2 from '../../asset/image/cg2.png'
import {cartAdd} from '../../request/cart_request'
import { news, groupon, seckill, indexgoods } from '../../request/home_request'

export default class Home extends Component {
    state = {
        news_list: [],//新人专享
        wanren_list: [],//万人团
        seckill_list: [],//秒杀
        now_list: [],//首页商品列表
        now_index: 0
    }
    changeList(index) {
        indexgoods().then(res => {
            this.setState({ now_index: index })
            this.setState({ now_list: res.list[index].content })
        })
    }
    UNSAFE_componentWillMount() {
        news().then(res => {
            this.setState({ news_list: res.list })
        })
        groupon().then(res => {
            this.setState({ wanren_list: res.list })
        })
        seckill().then(res => {
            this.setState({ seckill_list: res.list })
        })
        this.changeList(0)
    }
    addCar(goodsid,type=2){
        //type确定是万人团，是2
        //num确定为1
        cartAdd(goodsid,type,1).then(res=>{
           if(res.code == 200){
            this.props.restCarList()
           }
        })

    }
    render() {
        const { wanren_list, news_list, seckill_list, now_index, now_list } = this.state
        const {history}=this.props
        return (
            <div className="home">
                <div className="container">
                    <div className="header">
                        <img src={logo} alt="" />
                        <form action="">
                            <input type="text" placeholder="搜索商品" />
                            <button>搜索</button>
                        </form>
                    </div>
                    <div className="middle">
                        <div className="xrzx">
                            <div className="clearfix top">
                                <h2 className="ft">新人专享</h2>
                                <a href="#" className="rt">查看全部&gt;</a>
                            </div>
                        </div>

                        <div className="xrzx1">
                            <p>
                                <span>1重礼</span>
                                <span>新人特价商品专区</span>
                                <span>（限量供应，先到先得）</span>
                            </p>

                            <div className="look">
                                <ul>
                                    {
                                        news_list.map(item => (
                                            <li key={item.id}  onClick={()=>history.push("/gooddetail/?id="+item.id)}>
                                                <img src={this.$adress + item.img} alt="" />
                                                <span className="now">￥{item.price}</span>
                                                <span className="pri">￥{item.market_price}</span>
                                                <a href="#"></a>
                                            </li>
                                        ))
                                    }
                                </ul>
                            </div>

                        </div>
                        <div className="xrzx2">
                            <p>
                                <span>2重礼</span>
                                <span>新人通用50元礼券（下单立减，省了又省）</span>
                            </p>
                            <div>
                                <img className="yh1" src={yh1} alt="" />
                                <img className="yh2" src={yh2} alt="" />
                            </div>
                        </div>
                    </div>
                    <div className="middle-nav box">
                        <ul>
                            <li>
                                <a href="">
                                    <img src={seckilli} alt="" />
                                    <p>限时秒杀</p>
                                </a>
                            </li>
                            <li>
                                <a href="">
                                    <img src={top} alt="" />
                                    <p>畅销商品</p>
                                </a>
                            </li>
                            <li>
                                <a href="">
                                    <img src={brand} alt="" />
                                    <p>品质大牌</p>
                                </a>
                            </li>
                            <li>
                                <a href="">
                                    <img src={selfsupport} alt="" />
                                    <p>小u自营</p>
                                </a>
                            </li>
                            <li>
                                <a href="">
                                    <img src={integral} alt="" />
                                    <p>积分商城</p>
                                </a>
                            </li>
                        </ul>
                    </div>
                    <div className="ms">
                        <div className="cjms">
                            <div className="top">
                                <h2 className="ft">万人团</h2>
                            </div>
                            {
                                wanren_list.map((item) => {
                                    return <div className="content" key={item.id}>
                                        <img src={this.$adress + item.img} alt=""/>
                                        <div>
                                            <span>7折</span>
                                            <p>{item.goodsname}......</p>
                                            <p onClick={()=>this.addCar(item.id)}><b>￥{item.price}</b><u>￥{item.market_price}</u></p>
                                        </div>
                                    </div>
                                })
                            }
                        </div>
                        <div className="xsms">
                            <p>
                                <span>限时秒杀</span>
                                <span>新人特价商品专区</span>
                                <span>（限量供应，先到先得）</span>
                            </p>
                            <div className="look">
                                <ul>
                                    {
                                        seckill_list.map(item => (
                                            <li key={item.id}  onClick={()=>history.push("/gooddetail/?id="+item.id)}>
                                                <img src={this.$adress + item.img} alt="" />
                                                <span className="now">￥{item.price}</span>
                                                <span className="pri">￥{item.market_price}</span>
                                                <a href="#"></a>
                                            </li>
                                        ))
                                    }
                                </ul>
                            </div>
                        </div>
                    </div>
                    <div className="two11">
                        <div className="one">
                            <h3>双11尖货预约</h3>
                            <img src={d11} alt="" />
                        </div>
                        <div className="three">
                            <h3>畅购全球</h3>
                            <img src={cg1} alt="" />
                            <img src={cg2} alt="" />
                        </div>
                    </div>
                    <div className='nav'>
                        <ul>
                            <li onClick={() => this.changeList(0)} className={now_index === 0 ? "active" : ""}>
                                <p>热销好货</p>
                                <span>限量抢购</span>
                            </li>
                            <li onClick={() => this.changeList(1)} className={now_index === 1 ? "active" : ""}>
                                <p>折上折区</p>
                                <span>不买就亏</span>
                            </li>
                            <li onClick={() => this.changeList(2)} className={now_index === 2 ? "active" : ""}>
                                <p>时令水果</p>
                                <span>当季限定</span>
                            </li>
                            <li onClick={() => this.changeList(3)} className={now_index === 3 ? "active" : ""}>
                                <p>粮油调味</p>
                                <span>一键购齐</span>
                            </li>
                        </ul>
                    </div>
                    <div className="main">
                        {
                            now_list.map(item => (
                                <div className="item clearfix" key={item.id}  onClick={()=>history.push("/gooddetail/?id="+item.id)}>
                                    <div className="pic ft">
                                        <img src={this.$adress + item.img} alt="" />
                                    </div>
                                    <div className="intro ft">
                                        <span>7.9折</span>
                                        <p>溪牧原山茶花洁面乳精选太行山最优质......</p>

                                        <u>￥1.99</u>
                                        <u>￥199.00</u>
                                        <button onClick={()=>this.addCar(item.id,1)}>加入购物车</button>
                                    </div>
                                </div>
                            ))
                        }
                    </div>
                </div>
            </div>
        )
    }
}
